<template>
	<view>
		<iframe ref="mapRef" :src="mapSrc" id="map" frameborder="0" allow="geolocation"></iframe>
		<view id="location-picker-panel"></view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onUnload } from '@dcloudio/uni-app'

	let key = 'RJ6BZ-3SVCZ-UIHXK-ZME52-OE7DJ-YBFRG';
	let referer = "心宇利"
	let zoom = 13;

	const mapSrc = ref(
		`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=${referer}&zoom=${zoom}`
	)

	// 选择的地点
	const loc = ref({})

	function listenLockerPicker(event) {
		let locTmp = event.data;
		if (locTmp && locTmp.module === 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
			loc.value = locTmp
			uni.$emit('getAddderInfo', locTmp)
			uni.navigateBack();
		}
	}

	// 监听选址
	function bindChooseLocation() {
		window.addEventListener('message', listenLockerPicker, false);
	}

	const mapRef = ref(null);
	const map = ref(null);
	const initMap = () => {
		setTimeout(() => {
			map.value = new qq.maps.Map(mapRef.value, {
				center: new qq.maps.LatLng(39.916527, 116.397128),
				zoom: 13
			});
		}, 800)
	}

	onUnload(() => {
		window.removeEventListener('message', listenLockerPicker);
		map.value = null;
	})

	onMounted(() => {
		initMap();
		bindChooseLocation();
	})
</script>

<style>
	#map {
		width: 100%;
		height: 100vh;
		padding-bottom: 150rpx;
	}
</style>